<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* rem 布局原理 */
        /* 1. 将元素的宽高都设为rem单位 */
        /* 2. rem 是跟着html标签中的font-size走的 */
        /* 3. 如果屏幕宽度发生了变化，修改html中font-size的大小 */

        /* rem  (root) */
        /* html元素上的font-size就是1rem */
        html {
            font-size: 20px;
        }

        
        div, p, section {
            width: 10rem;
            height: 10rem;
            background-color: pink;
            border: 0.1rem solid red ;
            font-size: 1rem;
        }
    </style>
</head>

<body>
    <div>
        123
    </div>

    <p>456</p>

    <section></section>
    <!--  -->
    <script>
        // js代码实现 视口宽度与rem值关联变化
        window.onresize = function () {
            console.log('视口宽度变化')
            // 获取视口宽度
            var docEle = document.documentElement;
            console.log(docEle.clientWidth)

            docEle.style.fontSize = docEle.clientWidth / 20 + 'px';

        }
    </script>
</body>

</html>